<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/public_log.css">
    <link rel="stylesheet" href="../css/iconfont.css">
    <style>
        /* 主体 */
        #main{
            width: 70%;
            display: inline-block;
            width: 100%;
            font-size: 14px;
            margin: 40px 0;
            text-align: center;
        }
        #photo{
            float: left;
            margin-top: 25px;
        }
        #main #content{
            display: inline-block;
            width: 70%;
            position: relative;
        }
        #main #contentr{
            float: left;
            width: 350px;
            height: 350px;
            margin-left: 68px;
            text-align: left;
        }
        #main #contentr p{
            display: inline-block;
            font-size: 14px;
            color: rgb(80,80,80);
            font-weight: bold;
        }
        #main #contentr em{
            display: inline-block;
            font-size: 14px;
            color: rgb(150,150,150);
            font-style: normal;
        }
        #main #contentr>a{
            display: inline-block;
            font-size: 14px;
            color: rgb(150,150,150);
            font-style: normal;
        }
        #main #contentr>a:hover{
            color: rgb(204,51,51);
        }
        #loginform{
            margin-top: 5px;
            display: inline-block;
            width: 400px;
            height: 330px;
            border: 1px solid rgb(204,204,204);
        }
        #loginform i{
            font-style: normal;
        }
        #loginform li{
            line-height: 50px;
        }
        #loginform li span{
            display: inline-block;
            width: 100px;
            text-align: right;
            padding-right: 10px;
        }
        #loginform li em{
            display: inline-block;
            line-height: 30px;
            font-style: normal;
            border-radius: 5px;
            height: 30px;
            background-color: rgb(80,80,80);
            color: rgb(255,255,255);
            margin-left: 5px;
        }
        #loginform .cds{
            width: 200px;
            height: 30px;
        }
        #loginform .code{
            width: 100px;
        }
        #loginform button{
            width: 80px;
            height: 30px;
            border: none;
            color: rgb(255,255,255);
            background-color: rgb(240,78,0);
            border-radius: 5px;
        }
        #loginform .msg{
            width: 200px;
        }
        #other{
            text-align: center;
        }
        #other span{
            display: inline-block;
            width: 15px;
            height: 15px;
            margin: 0 5px;
        }
    </style>
</head>
<body>
    <div id="header">
        <div id="logo"><a href="../index.html"></a></div>
        <div id="loginbar">
            <ul>
                <li><a href="">请登录</a></li>
                <li><a href="logon.html">快速注册</a><span></span></li>
                <li><a href="">我的码头</a><span></span></li>
            </ul>
        </div>
    </div>
    <div id="main">
        <div id="content" class="clearfix">
            <div id="photo"><img src="../static/img1.jpg" alt=""></div>
            <div id="contentr">
                <p>洋码头账户登录</p><em>|</em><a href="logon.html">免费注册</a>
                <div id="loginform">
                    <ul>
                        <li><span>用户名：</span><input type="text" placeholder="请输入用户名" class="cds user"><i></i></li>
                        <li><span>密码：</span><input type="password" placeholder="请输入密码"class="cds pass"><i></i></dliiv>
                        <li><span>验证码：</span><input type="text" placeholder="请输入验证码" class="code cds"><em>1234</em></li>
                        <li><span></span><input type="checkbox" name="save_login" id="" value="两周内自动登录">两周内自动登录</li>
                        <li><span></span><button class="submit">登录</button><span>忘记密码</span> <span class="msg"></span></li>
                    </ul>
                    <div id="other"><span class="iconfont icon-weibo" style="color: rgb(243,0,0);"></span><a>微博登录</a><span class="iconfont icon-zhifubao" style="color: rgb(0,88,245);"></span><a>支付宝账户登录</a><span class="iconfont icon-weixin" style="color: rgb(111,200,43);"></span><a>微信登录</a></div>
                </div>
            </div>
        </div>
    </div>
    <div id="footer">
        <span>© 2009－2019 ymatou.com, All rights reserved 增值电信业务经营许可证：沪B2-20140021</span>
        <p>上海洋码头网络技术有限公司  版权所有 备案号（ 沪ICP备11050082号 ）</p>
        <span>上海市静安区江场三路93号13层</span>
    </div>
</body>
<script src="../js/ajax-promise.js"></script>
<script>
    class login{
        constructor(){
            this.user=document.querySelector(".user");
            this.pass=document.querySelector(".pass");
            this.submit=document.querySelector(".submit");
            this.msg=document.querySelector(".msg");
            this.userOnOff =this.passOnOff =  false;
            this.url="http://api.icodeilife.cn:81/user";
            this.addEvent();
        }
        addEvent(){
            var that=this;
            this.user.oninput=function(){
                var reg=/^[a-zA-Z][\w\-]{3,19}$/;
                if(!reg.test(that.user.value)){
                    that.user.nextElementSibling.innerHTML="格式错误";
                    that.userOnOff=false;
                    return;
                }else{
                    that.user.nextElementSibling.innerHTML="";
                    that.userOnOff=true;
                }
            }
            this.pass.oninput=function(){
                var reg=/^.{6,16}$/;
                if(!reg.test(that.pass.value)){
                    that.pass.nextElementSibling.innerHTML="格式错误";
                    that.passOnOff=false;
                    return;
                }else{
                    that.pass.nextElementSibling.innerHTML="";
                    that.passOnOff=true;
                }
            }
            this.submit.onclick=function(){
                that.u=that.user.value;
                that.p=that.pass.value;
                that.load();
            }
        }
        load(){
            ajax({
                url:this.url,
                data:{
                    type: "login",
                    user: this.u,
                    pass: this.p
                }
            }).then((res)=>{
                this.res = JSON.parse(res);
                this.display();
            })
        }
        display(){
            switch(this.res.code){
                case 0:
                    this.msg.innerHTML=this.res.msg + "，3秒后到注册";
                    setTimeout(() => {
                        location.href = "logon.html";
                    }, 3000);
                    break;
                case 1:
                    if(this.userOnOff&&this.passOnOff){
                        this.msg.innerHTML="登录成功，3秒后到购物车" ;
                        setTimeout(() => {
                            location.href = "myCart.html";
                        }, 3000);
                        sessionStorage.setItem("userMsg",JSON.stringify(this.res.msg));
                    }else{
                        this.msg.innerHTML="请输入用户名和密码" ;
                    }
                    break;
                case 2:
                    this.msg.innerHTML=this.res.msg + "，请重新输入";
                    this.user.value = this.pass.value = "";
                    this.user.focus();
            }
        }
    }
    new login();
</script>
</html>
